import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  Animated,
} from 'react-native';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import BaseItem from '../common/BaseItem';
import CommonAvatarView from '../common/CommonAvatarView';
import Constants from '../../common/Constants';
import TClickShowText from '../../components/TClickShowText';
import {DateUtils} from '../../utils/Utils';
import CommonStyles from '../../common/CommonStyles';
import TImage from '../../components/TImage';

export default class CommonCommentItemView extends BaseItem {
  tcommentView(){
    var list =[];
    const Tname = this.props.data.by_name;
    var arr = [];
    if (this.props.data.follow_comments) {
      arr =this.props.data.follow_comments.comments||[];
    }
    if (this.props.data.comment_follows) {
      arr =this.props.data.comment_follows||[];
    }
    for (var i = 0; i < arr.length; i++) {
      const item =arr[i];
      list.push(
        <View key={'item.post_id'+i} index={item.post_id} style={{
              flex:1,
              flexDirection:'row',paddingLeft:5,paddingRight:5,paddingTop:5,paddingBottom:5,
            }}>
          {
            Tname===item.to_name?
            <Text style={[CommonStyles.secondaryText,{color:'#3a9bfc'}]}>{item.by_name}: </Text>:
            <Text style={[CommonStyles.secondaryText,{color:'#3a9bfc'}]}><Text style={{color:'#ff6600'}}>{item.by_name}</Text>{'@'+item.to_name}: </Text>
          }
          <Text style={[CommonStyles.secondaryText,{flex:1,color:'#000'}]}>{item.content}</Text>
          {
                this.props.type=='news'||this.props.type=='quanzi'?
          <TouchableOpacity style={{flexDirection: "row",alignItems: 'flex-end',}} onPress={()=>{
                  this.props.onReply&&this.props.onReply(this.props.data,item);
                }}>
                <TImage source={require("../../../resource/images/home/jianyi.png")} 
                  style={{marginRight:4,width:30,height:30,}}/>
                <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(24)}]}>
                  {'回复'}
                 </Text>
          </TouchableOpacity>:null}
        </View>
        )
    }
    return list;
  }
  render() {
    return(
      <View style={{flex:1,
          marginTop: SizeUtils.translateDesignNumToCode(20),
          paddingBottom :SizeUtils.translateDesignHeightToCode(10),
        }}>
        <View style={{flexDirection: "row",flex:1}}>
            <CommonAvatarView avatarUri={this.props.data.by_avatar} size={80}/>
            <View style={{flex:1, flexDirection: "column", marginLeft:SizeUtils.translateDesignWidthToCode(24)}}>
              <Text style={[CommonStyles.assistText,
                {color:'#ff6600',fontSize:SizeUtils.translateFontSizeToCode(26), backgroundColor:"#00000000", borderWidth:0,}]}>
                {this.props.data.by_name ? this.props.data.by_name : "未知用户"}
              </Text>
              <TClickShowText style={[CommonStyles.primaryText,
                {color:'#66686b',fontSize:SizeUtils.translateFontSizeToCode(32), backgroundColor:"#00000000", borderWidth:0,
                marginTop:SizeUtils.translateDesignHeightToCode(10)}]}
                content={this.props.data.content}>
              </TClickShowText>
            <View style={{flex:1, flexDirection: "row",justifyContent: 'space-between',}}>
              <Text style={[CommonStyles.assistText,
                {fontSize:SizeUtils.translateFontSizeToCode(22), backgroundColor:"#00000000", borderWidth:0,
                  marginTop:SizeUtils.translateDesignHeightToCode(10)}]}>{DateUtils.formatDiffFromServerTime(this.props.data.commented_at)}
              </Text>
              {
                this.props.type=='news'||this.props.type=='quanzi'?
                <TouchableOpacity style={{flexDirection: "row",}} onPress={()=>{
                  this.props.onReply&&this.props.onReply(this.props.data);
                }}>
                <TImage source={require("../../../resource/images/home/jianyi.png")} 
                  style={{marginRight:4,width:30,height:30,}}/>
                <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(24)}]}>
                  {'回复'}
                 </Text>
                </TouchableOpacity>:null
              }
          </View>
        </View>
        </View>
        {this.props.data.comment_follows||this.props.data.follow_comments?<View style={{backgroundColor:'#ededed'}}>{
            this.tcommentView()
          }</View>:null}
      </View>
    )
  }
}
